/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Libre+Franklin&display=swap');

/* CSS Variables */
:root {
    --primary-font: "Libre Baskerville", serif;
    --secondary-font: "Libre Franklin", sans-serif;
    --primary-font-color: #FEFEFA;
    --primary-bg-color: #53595F;
    --black-color: rgb(2, 2, 2);
}

/* General CSS */
body {
    background: #35302C url("../images/background-small.webp") repeat 0px 0px / cover;
    font-family: var(--secondary-font);
    color: var(--primary-font-color);
}

h1,
h2 {
    letter-spacing: 0.2rem;
    font-family: var(--primary-font);
}

button {
    background-color: var(--primary-bg-color);
    border: var(--primary-font-color) ridge 5px;
    color: var(--primary-font-color);
    box-shadow: inset 0 0 16px 10px var(--black-color);
    font-family: var(--primary-font);
}

button:hover {
    box-shadow: inset 0 0 16px 10px var(--black-color),
        0 0 6px 3px var(--primary-font-color);
}

/* Buttons with links */
button a {
    text-decoration: none;
    color: var(--primary-font-color);
}

/* Instructions Modal */
.modal-content {
    background-color: var(--primary-bg-color);
    color: var(--primary-font-color);
    border: var(--primary-font-color) 4px ridge;
    border-radius: 1rem;
}

.modal-content button {
    background-color: var(--primary-bg-color);
    border: var(--primary-font-color) ridge 2px;
    font-family: var(--primary-font);
    box-shadow: inset 0 0 8px 3px var(--black-color);
}

/* Game Page */
#board i {
    color: var(--primary-font-color);
}

#board i:hover {
    text-shadow: 0 0 16px var(--primary-font-color);
}

.card {
    /* Ensure height is always equal to width */
    aspect-ratio: 1 / 1;
    border: var(--black-color) 1px solid;
    border-radius: 0.5rem;
    box-shadow: 2px 2px 2px 2px var(--black-color);
}

.card:hover {
    box-shadow: 0 0 6px 3px var(--primary-font-color);
}

.card-1 {
    background: url("../images/billiard-ball-ai-generated.webp") no-repeat 0px 0px / cover;
}

.card-2 {
    background: url("../images/closeup-baseball.webp") no-repeat 0px 0px / cover;
}

.card-3 {
    background: url("../images/cricket-ball-isolated.webp") no-repeat 0px 0px / cover;
}

.card-4 {
    background: url("../images/details-ball-sport.webp") no-repeat 0px 0px / cover;
}

.card-5 {
    background: url("../images/high-angle-basketball.webp") no-repeat 0px 0px / cover;
}

.card-6 {
    background: url("../images/rugby-ball-grass.webp") no-repeat 0px 0px / cover;
}

.card-7 {
    background: url("../images/soccer-ball-turf-grass.webp") no-repeat 0px 0px / cover;
}

.card-8 {
    background: url("../images/sport-ball-outdoors.webp") no-repeat 0px 0px / cover;
}

.card-9 {
    background: url("../images/top-view-one-tennis-ball.webp") no-repeat 0px 0px / cover;
}

.card-10 {
    background: url("../images/view-golf-sport-equipment.webp") no-repeat 0px 0px / cover;
}

.card-blank {
    background: url("../images/card-back.webp") no-repeat 0px 0px / cover;
}

.hidden {
    visibility: hidden;
}

/* Game Over Message Box  */
#game-over {
    border: var(--primary-font-color) ridge 5px;
    background-color: var(--primary-bg-color);
    box-shadow: 4px 4px 5px 3px var(--black-color);
    border-radius: 1rem;
}

.visibility {
    display: none;
}

/* Media Queries*/

/* Large screen sizes - 576px up*/

@media screen and (min-width: 576px) {

    /* Ensure cards don't get too big on bigger screens */
    #board {
        width: 70vw;
    }
}

/* Medium screen sizes - 768px up*/
@media screen and (min-width: 768px) {
    body {
        background: #35302C url("../images/background.webp") repeat 0px 0px / cover;
    }

    /* Ensure cards don't get too big on bigger screens */
    #board {
        width: 80vw;
    }

    #current-score,
    #best-score {
        font-size: 1.2rem;
    }
}

/* Large screen sizes - 992px up*/
@media screen and (min-width: 992px) {

    /* Ensure cards don't get too big on bigger screens */
    #board {
        width: 50vw;
    }
}